{extend name="common/base" /}
{block name="body"} 
<main>
    <!-- 第一板块 -->
    <div class="container register">
        <h1 class="register-title">Personal Information</h1>
        <ul class="layui-row layui-col-space30">
            <li class="layui-col-md5 layui-col-xs12">
                <label for="first_name">First Name</label>
                <div class="input-style">
                    <input type="text" id="first_name" name="first_name" placeholder="Enter your first name" maxlength="20">
                </div>
            </li>
            <li class="layui-col-md5 layui-col-xs12">
                <label for="last_name">Last Name</label>
                <div class="input-style">
                    <input type="text" id="last_name" name="last_name" placeholder="Enter your last name" maxlength="20">
                </div>
            </li>
            <li class="layui-col-md5 layui-col-xs12">
                <label for="date">Birthday</label>
                <div class="input-style input-data">
                    <input type="text" id="date" name="birthday" placeholder="Please enter your birthday">
                    <div class="layui-input-suffix">
                        <i class="layui-icon layui-icon-date"></i>
                    </div>
                </div>
            </li>
            <li class="layui-col-md5 layui-col-xs12">
                <label for="email">Email</label>
                <div class="input-style">
                    <input type="text" id="email" name="email" placeholder="Please enter your email address">
                </div>
            </li>
            <li class="layui-col-md5 layui-col-xs12">
                <label for="password">Password</label>
                <div class="input-style">
                    <input type="password" id="password" name="password" placeholder="Please enter your password">
                </div>
            </li>
            <li class="layui-col-md5 layui-col-xs12">
                <label for="confirm_password">Confirm Password</label>
                <div class="input-style">
                    <input type="password" id="confirm_password" name="confirm_password" placeholder="Please confirm your password">
                </div>
            </li>
            <li class="layui-col-md5 layui-col-xs12">
               
                <div class="layui-form sign-prompt">
                    <input class="checkbox-style" type="checkbox" id="newsletter" class="checkbox-style" name="newsletter">
                    <p>sign up for our newsletters and srs to receive exclusive discounts, product previews, and
                        private sales!
                        <span>by ticking this optian you give us permission to conkact you for marketing ourposes
                            via email, sms and socisl medis</span>
                    </p>
                </div>
                <div class="footer-buttons layui-row">
                    <p class="back-button layui-col-md5 layui-col-xs5">Back</p>
                    <p
                        id="register"
                        class="register-button layui-col-md6 layui-col-xs6 layui-col-md-offset1 layui-col-xs-offset1">
                        Register</p>
                </div>
                <div class="register_login_box">
                    
                    <a href="javascript:void(0);" lay-on="logins">Existing account? Log in</a>
                </div>
            </li>
        </ul>
    </div>
</main>
{/block}

{block name="js"} 
<script>
    $(function () {
        // Initialize Layui date picker
        layui.laydate.render({
            elem: '#date',
            type: 'date'
        });

        // Register button click event
        $('#register').on('click', function () {
            const firstName = $('#first_name').val().trim();
            const lastName = $('#last_name').val().trim();
            const birthday = $('#date').val().trim();
            const email = $('#email').val().trim();
            const password = $('#password').val();
            const confirmPassword = $('#confirm_password').val();
            const newsletter = $('#newsletter').is(':checked');

            if (!firstName || firstName.length > 20) {
                return layui.layer.msg('First Name is required and must not exceed 20 characters.', {icon: 2});
            }
            if (!lastName || lastName.length > 20) {
                return layui.layer.msg('Last Name is required and must not exceed 20 characters.', {icon: 2});
            }
            if (!birthday) {
                return layui.layer.msg('Birthday is required.', {icon: 2});
            }
            if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
                return layui.layer.msg('Invalid email address.', {icon: 2});
            }
            if (!password) {
                return layui.layer.msg('Password is required.', {icon: 2});
            }
            if (password !== confirmPassword) {
                return layui.layer.msg('Passwords do not match.', {icon: 2});
            }
            if (!newsletter) {
                return layui.layer.msg('You must agree to the terms.', {icon: 2});
            }

            // Submit form
            const data = {
                first_name: firstName,
                last_name: lastName,
                birthday: birthday,
                email: email,
                password: password,
                confirmPassword : confirmPassword
            };

            ajaxRequest('/register', data, 'POST', this, function (response) {
                layer.msg('REGISTER SUCCESS', {icon: 1, time: 2000}, function() {
                    // 弹窗消失后跳转
                    window.location.href = '/login'; // 替换为目标页面的 URL
                });
            });
        });

        // 点击登录按钮弹出登录弹窗
        $('[lay-on="logins"]').on('click', function () {
            layer.open({
                type: 1,
                area: ['1000px', 'auto'], // 宽高
                title: false, // 不显示标题栏
				closeBtn: 0,
				shadeClose: true, // 点击遮罩关闭层
				skin: 'login-dialog',
                content: `
                    <h1 class="dialog-title">Sign in with your existing account</h1>
                    <form class="layui-form" id="login-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">Username/email:</label>
                            <div class="layui-input-block">
                                <div class="input-style">
                                    <input type="text" id="login-username" name="username" placeholder="Enter your username/email" required>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">Password:</label>
                            <div class="layui-input-block">
                                <div class="input-style">
                                    <input type="password" id="login-password" name="password" placeholder="Enter your password" required>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item center_box">
                            <button  class="btn" id="submit-login">Login</button>
                        </div>
                    </form>
                `
            });

            // 登录按钮点击事件
            $('#submit-login').on('click', function () {
                const username = $('#login-username').val().trim();
                const password = $('#login-password').val();

                // 验证输入
                if (!username) {
                    return layui.layer.msg('Username/email is required.', {icon: 2});
                }
                if (!password) {
                    return layui.layer.msg('Password is required.', {icon: 2});
                }

                // 发送登录请求
                const loginData = { username: username, password: password };
                ajaxRequest('/login', loginData, 'POST', this, function (response) {
                    layer.msg('REGISTER SUCCESS', {icon: 1, time: 2000}, function() {
                        // 弹窗消失后跳转
                        window.location.href = '/index'; // 替换为目标页面的 URL
                    });
                });
            });
        });

    });
</script>
{/block}
